<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    

    <title>
      css盒模型 | 江月夜 
    </title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    
      <meta name="author" content="江月夜">
    
    

    <meta name="description" content="css盒模型的基本概念盒模型由内向外由content,padding, border, margin组成。盒模型有两种：标准模型，IE模型。 标准模型和IE模型的区别这俩种盒模型的区别是计算宽度和高度的不同。标准模型的宽高只计算内容（content）,IE模型宽高计算为内容（content）+填充（padding）+边">
<meta name="keywords" content="前端">
<meta property="og:type" content="article">
<meta property="og:title" content="css盒模型 | 江月夜">
<meta property="og:url" content="http://yoursite.com/2018/09/25/css-box/index.html">
<meta property="og:site_name" content="江月夜">
<meta property="og:description" content="css盒模型的基本概念盒模型由内向外由content,padding, border, margin组成。盒模型有两种：标准模型，IE模型。 标准模型和IE模型的区别这俩种盒模型的区别是计算宽度和高度的不同。标准模型的宽高只计算内容（content）,IE模型宽高计算为内容（content）+填充（padding）+边框（border）的总宽高。 如何设置这俩种盒模型1234/*标准模型*/box">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://yoursite.com/images/css-box_f.png">
<meta property="og:image" content="http://yoursite.com/images/css-box_ie.png">
<meta property="og:updated_time" content="2018-10-29T09:05:31.112Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="css盒模型 | 江月夜">
<meta name="twitter:description" content="css盒模型的基本概念盒模型由内向外由content,padding, border, margin组成。盒模型有两种：标准模型，IE模型。 标准模型和IE模型的区别这俩种盒模型的区别是计算宽度和高度的不同。标准模型的宽高只计算内容（content）,IE模型宽高计算为内容（content）+填充（padding）+边框（border）的总宽高。 如何设置这俩种盒模型1234/*标准模型*/box">
<meta name="twitter:image" content="http://yoursite.com/images/css-box_f.png">
    
    
    
      <link rel="icon" type="image/x-icon" href="/favicon.png">
    
    <link rel="stylesheet" href="/css/uno.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <link rel="stylesheet" href="/css/archive.css">
    <link rel="stylesheet" href="/css/china-social-icon.css">

</head>
<body>

    <span class="mobile btn-mobile-menu">
        <i class="icon icon-list btn-mobile-menu__icon"></i>
        <i class="icon icon-x-circle btn-mobile-close__icon hidden"></i>
    </span>

    

<header class="panel-cover panel-cover--collapsed">


  <div class="panel-main">

  
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        

        <h1 class="panel-cover__title panel-title"><a href="/" title="link to homepage">江月夜</a></h1>
        <hr class="panel-cover__divider" />

        
        <p class="panel-cover__description">
          腹有诗书气自华
        </p>
        <hr class="panel-cover__divider panel-cover__divider--secondary" />
        

        <div class="navigation-wrapper">

          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">

              
                
                <li class="navigation__item"><a href="/#blog" title="" class="blog-button">首页</a></li>
              
                
                <li class="navigation__item"><a href="/about" title="" class="">关于</a></li>
              
                
                <li class="navigation__item"><a href="/archive" title="" class="">归档</a></li>
              

            </ul>
          </nav>

          <!-- ----------------------------
To add a new social icon simply duplicate one of the list items from below
and change the class in the <i> tag to match the desired social network
and then add your link to the <a>. Here is a full list of social network
classes that you can use:

    icon-social-500px
    icon-social-behance
    icon-social-delicious
    icon-social-designer-news
    icon-social-deviant-art
    icon-social-digg
    icon-social-dribbble
    icon-social-facebook
    icon-social-flickr
    icon-social-forrst
    icon-social-foursquare
    icon-social-github
    icon-social-google-plus
    icon-social-hi5
    icon-social-instagram
    icon-social-lastfm
    icon-social-linkedin
    icon-social-medium
    icon-social-myspace
    icon-social-path
    icon-social-pinterest
    icon-social-rdio
    icon-social-reddit
    icon-social-skype
    icon-social-spotify
    icon-social-stack-overflow
    icon-social-steam
    icon-social-stumbleupon
    icon-social-treehouse
    icon-social-tumblr
    icon-social-twitter
    icon-social-vimeo
    icon-social-xbox
    icon-social-yelp
    icon-social-youtube
    icon-social-zerply
    icon-mail

-------------------------------->

<!-- add social info here -->



<nav class="cover-navigation navigation--social">
  <ul class="navigation">

    
      <!-- Github -->
      <li class="navigation__item">
        <a href="https://github.com/ajiu9" title="">
          <i class='icon icon-social-github'></i>
          <span class="label">GitHub</span>
        </a>
      </li>
    

    <!-- China social icon -->
    <!--
    
      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-douban'></i>
          <span class="label">Douban</span>
        </a>
      </li>

      <li class="navigation__item">
        <a href="" title="">
          <i class='icon cs-icon-weibo'></i>
          <span class="label">Weibo</span>
        </a>
      </li>

    -->



  </ul>
</nav>



        </div>

      </div>

    </div>

    <div class="panel-cover--overlay"></div>
  </div>
</header>

    <div class="content-wrapper">
        <div class="content-wrapper__inner entry">
            

<article class="post-container post-container--single">

  <header class="post-header">
    
    <h1 class="post-title">css盒模型</h1>

    

    <div class="post-meta">
      <time datetime="2018-09-25" class="post-meta__date date">2018-09-25</time> 

      <span class="post-meta__tags tags">

          
            <font class="categories">
            &#8226; 分类:
            <a class="categories-link" href="/categories/css/">css</a>
            </font>
          

          
             &#8226; 标签:
            <font class="tags">
              <a class="tags-link" href="/tags/前端/">前端</a>
            </font>
          

      </span>
    </div>
    
    

  </header>

  <section id="post-content" class="article-content post">
    <h3 id="css盒模型的基本概念"><a href="#css盒模型的基本概念" class="headerlink" title="css盒模型的基本概念"></a>css盒模型的基本概念</h3><p>盒模型由内向外由content,padding, border, margin组成。<br>盒模型有两种：标准模型，IE模型。</p>
<h3 id="标准模型和IE模型的区别"><a href="#标准模型和IE模型的区别" class="headerlink" title="标准模型和IE模型的区别"></a>标准模型和IE模型的区别</h3><p>这俩种盒模型的区别是计算宽度和高度的不同。<br>标准模型的宽高只计算内容（content）,IE模型宽高计算为内容（content）+填充（padding）+边框（border）的总宽高。<br><img src="/images/css-box_f.png" alt=""><br><img src="/images/css-box_ie.png" alt=""></p>
<h3 id="如何设置这俩种盒模型"><a href="#如何设置这俩种盒模型" class="headerlink" title="如何设置这俩种盒模型"></a>如何设置这俩种盒模型</h3><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">/*标准模型*/</span><br><span class="line">box-sizing: content-box;</span><br><span class="line">/*IE模型*/</span><br><span class="line">box-sizing: border-box;</span><br></pre></td></tr></table></figure>
<h3 id="JS如何获取盒模型的宽和高"><a href="#JS如何获取盒模型的宽和高" class="headerlink" title="JS如何获取盒模型的宽和高"></a>JS如何获取盒模型的宽和高</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> node = <span class="built_in">document</span>.getElementById(<span class="string">'node'</span>)</span><br></pre></td></tr></table></figure>
<ul>
<li>node.style.width/height<br>这种方式只能取到dom元素内联样式的宽和高，通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽和高的</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/currentStyle" target="_blank" rel="noopener">node.currentStyle.width/height</a><br>这种方式是获取渲染后的结果，但只在旧版本的IE浏览器中支持，该特性是非标准的，尽量不要在生产环境中使用它。</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle" target="_blank" rel="noopener">window.getComputerStyle(node).width/height</a><br>Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。和上一种方式是相似的，但通用性更好。</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect" target="_blank" rel="noopener">node.getBoundingClientRect().width/height</a><br>Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。包含边框(border)、内边距(padding)以及CSS设置的宽度(width)值</li>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth" target="_blank" rel="noopener">node.offsetWidth/offsetHeight</a><br>这种方式是测量包含元素的边框(border)、内边距(padding)、滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)和高度（height）的值。</li>
</ul>
<h3 id="边距重叠"><a href="#边距重叠" class="headerlink" title="边距重叠"></a>边距重叠</h3><ul>
<li>父子元素边距重叠（子元素设置margin-top:20px; 父元素也一起有了上边距）</li>
<li>兄弟元素边距重叠（兄弟元素的下边距margin-bottom和他兄弟元素上边margin-top距重叠，重叠规则是取它们之间最大值）</li>
<li>空元素的边距重叠（空元素的上边距margin-top和下边距margin-bottom重叠，重叠规则是取它们之间最大值）</li>
</ul>
<h3 id="边距重叠解决方案（BFC）"><a href="#边距重叠解决方案（BFC）" class="headerlink" title="边距重叠解决方案（BFC）"></a>边距重叠解决方案（BFC）</h3><p>BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。</p>
<h4 id="W3C对BFC的定义如下："><a href="#W3C对BFC的定义如下：" class="headerlink" title="W3C对BFC的定义如下："></a>W3C对BFC的定义如下：</h4><p>浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。</p>
<h4 id="BFC布局规则："><a href="#BFC布局规则：" class="headerlink" title="BFC布局规则："></a>BFC布局规则：</h4><ul>
<li>内部的Box会在垂直方向属于同一个BFC的两个相邻Box的margin会发生重叠。</li>
<li>BFC的区域不会与float box重叠。</li>
<li>BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此。</li>
<li>计算BFC的高度时，浮动元素也参与计算。</li>
</ul>
<h3 id="如何创建BFC"><a href="#如何创建BFC" class="headerlink" title="如何创建BFC"></a>如何创建BFC</h3><p>根据BFC的定义，创建方式有几种</p>
<ul>
<li>float属性不为none</li>
<li>position为absolute或fixed</li>
<li>display为inline-block, table-cell, table-caption, flex, inline-flex</li>
<li>overflow不为visible</li>
</ul>
<h3 id="应用场景"><a href="#应用场景" class="headerlink" title="应用场景"></a>应用场景</h3><ul>
<li>自适应浮动布局中浮动重叠（给该自适应元素创建BFC）</li>
<li>解决父子元素边距重叠（给父元素创建BFC）</li>
<li>清楚浮动（给浮动元素的父元素创建BFC）</li>
</ul>

  </section>

  <section class="post-comments">

   <!--PC和WAP自适应版-->
<div id="SOHUCS" sid="请将此处替换为配置SourceID的语句" ></div> 
<script type="text/javascript"> 
(function(){ 
var appid = 'cytl2q04G'; 
var conf = 'prod_c6e77c75d2d767714e129c11e500044d'; 
var width = window.innerWidth || document.documentElement.clientWidth; 
if (width < 960) { 
window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
    
</section>


</article>


            <footer class="footer">

    <span class="footer__copyright">&copy; 2017 | 由<a href="https://hexo.io/">Hexo</a>| 主题<a href="https://github.com/someus/huno">Huno</a></span>
    
</footer>
        </div>
    </div>

    <!-- js files -->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/scale.fix.js"></script>
    

    

    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            MathJax.Hub.Config({ 
                tex2jax: {inlineMath: [['[latex]','[/latex]'], ['\\(','\\)']]} 
            });
        });
    </script>


    

    <script src="/js/awesome-toc.min.js"></script>
    <script>
        $(document).ready(function(){
            $.awesome_toc({
                overlay: true,
                contentId: "post-content",
            });
        });
    </script>


    
    
    <!--kill ie6 -->
<!--[if IE 6]>
  <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script>
<![endif]-->

</body>
</html>
